<!-- 单文件组件的脚本部分，使用setup语法糖 -->
<!-- setup语法糖是Vue3的特性，简化了组件的编写，不需要显式导出 -->
<script setup>
// 从Vue中导入需要的API
// watch用于监听响应式数据的变化
// ref用于创建响应式数据（适用于基本类型数据）
import { watch, ref } from "vue";

// 创建一个响应式数据cityName，初始值为"beijing"
// ref包装后的数据会变成一个对象，通过.value访问其值
// 在模板中使用时不需要.value，Vue会自动解包
const cityName = ref("beijing");

// 使用watch监听cityName的变化
// 第一个参数：要监听的响应式数据
// 第二个参数：回调函数，当数据变化时执行
// 回调函数的参数：
//   newVal - 变化后的新值
//   oldVal - 变化前的旧值
watch(cityName, (newVal, oldVal) => {
  // 当cityName变化时，在控制台打印新值和旧值
  console.log("新值：", newVal, "旧值：", oldVal);
})
</script>

<!-- 模板部分，定义组件的HTML结构 -->
<template>
  <!--
    input输入框，使用v-model指令与cityName双向绑定
    v-model会自动处理：
    1. 将cityName的值显示在输入框中
    2. 当输入框内容变化时，自动更新cityName的值
    这种双向绑定会触发watch的监听回调
  -->
  <input type="text" v-model="cityName">
</template>

<!-- 样式部分，scoped表示样式只作用于当前组件 -->
<!-- 避免样式污染其他组件 -->
<style scoped>

</style>